<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px"  style="margin:20px;width:60%;min-width:600px;">
      <el-form-item label="部门名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="部门简介">
        <el-input v-model="form.intro"></el-input>
      </el-form-item>
      <el-form-item label="部门主管">
        <el-autocomplete
            v-model="managerName"

            :fetch-suggestions="findEmploy"
            placeholder="请输入内容"
            @select="chose"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="上级部门">
        <el-cascader
            v-model="parentIds"
            :options="parentDept"></el-cascader>
        <el-form-item>
        </el-form-item>

        <el-button type="primary" @click="update">确认修改</el-button>
        <el-button @click="canceUpdate">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "updateDept",
  data(){
    return{
      props:{
        "value":1
      },
      managerName:'',
      employId:'',
      parentDept:[],
      employList:[],
      parentIds:[],
      form:{
        name:'',
        intro:'',
        managerName:'',
        managerId:'',
        parentId:null,
        path:'',
      }
    }
  },
  mounted(){
    this.$bus.$on('updateDept',(list,deptId,employList)=>{
      this.parentDept=list;
      this.employList=employList;
      axios.get("http://localhost:8080/api/tOrgDepartment/findById/"+deptId)
      .then((resp)=>{
        this.form=resp.data.data
        this.$message({
          message:"请求成功",
          type:"success"
        })
        //回显部门主管
        for (let i = 0; i < this.employList.length; i++) {
          if (this.employList[i].id==this.form.managerId){
            this.managerName=this.employList[i].username
          }
        }
        //回显部门层级关系
        let strings = this.form.path.split('/');
        let parentIds =[];
        for (let i = 1; i < strings.length; i++) {
          parentIds.push(parseInt(strings[i]))
        }
        this.parentIds=parentIds
      })
    })
  },
  methods:{
    canceUpdate(){
      this.$bus.$emit('closeUpdate',false)
    },
    //更新
    update(){
      //校验数据
      if (this.managerName==null||this.managerName==''){
        this.$message({
          message:'请选中部门主管',
          type:'warning'
        })
        return false;
      }
      //封装path
      let paths = "";
      for (let i = 0; i < this.parentIds.length; i++) {
        paths += '/'+this.parentIds[i];
      }
      paths.split(paths.length-1,1);
      this.form.path=paths;
      this.from.parentId=this.parentIds[this.parentIds.length-1];
      //更新数据
      axios({
        url:'http://localhost:8080/api/tOrgDepartment/update',
        method:"put",
        data:this.form,
      }).then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          //关闭对话框并刷新数据
          this.$bus.$emit('closeUpdate',true)
        }
      })
    },
    chose(item){
      this.form.managerId=item.id;
      this.managerName=item.username
    },
    findEmploy(query,cb){
      let list =this.employList.filter(function (item){
        return item.username.indexOf(query)!=-1
      })
      let needList =[];
      for (let i = 0; i < list.length; i++) {
        let obj ={
          value:list[i].username,
          id:list[i].id
        }
        needList.push(obj)
      }

      cb(needList)
    }
  }
}
</script>

<style scoped>

</style>